<template>
  <div>
    <!-- 菜单模板 -->
    <div
      class="fill-base ml-lg mr-lg mb-lg radius-15 box-shadow"
      :class="[{'pt-lg':o.data.isShowTitle},{'menu-gird-icon':o.data.module==='module-menu-col'}]"

    >
      <div
        class="f-title b-1px-b pl-lg pb-lg"
        :class="[{'mb-lg':o.data.module==='module-menu-row'}]"
        style="line-height: 20px;"
        v-if="o.data.isShowTitle"
      >{{o.title}}</div>
      <!-- 一行多列 -->
      <div class="menu-gird-icon flex-warp" :class="[{'pt-lg':!o.data.isShowTitle}]" v-if="o.data.module==='module-menu-row'">
        <div
          v-for="(citem,cindex) in o.data.list"
          :key="cindex"
          :style="{flex:'0 0'+ (100/o.data.row.number)+'%'}"
        >
          <div class="text-center pb-lg" :class="['flex-' + o.data.row.number]">
            <i class="iconfont" :class="citem.icon" style="color:#19c865"></i>
            <div class="f-caption c-title">{{citem.title}}</div>
          </div>
        </div>
      </div>
      <!-- 一行一列 -->
      <div v-if="o.data.module==='module-menu-col'">
        <div
          class="flex-center menu-col-item pl-lg pr-md b-1px-b"
          v-for="(citem,cindex) in o.data.list"
          :key="cindex"
        >
          <div class="flex-1">
            <div class="flex-center">
              <i class="iconfont" :class="citem.icon" style="color: #19c865;font-size:18px"></i>
              <div class="f-paragraph c-title flex-1 ml-md">{{citem.title}}</div>
            </div>
          </div>
          <div class="flex-y-baseline">
            <i class="iconfont iconjiantou"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'moduleMenu',
  props: {
    o: Object
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

/* 菜单模板 */
.menu-gird-icon i[class*="icon"] {
  font-size: 29px;
  line-height: 38px;
}

.menu-col-item {
  line-height: 50px;
}

.menu-col-item i[class*="icon"] {
  font-size: 22px;
  line-height: 22px;
}

.menu-col-item i.iconjiantou {
  font-size: 16px;
  line-height: 16px;
  color: #999999;
}
</style>
